<template>
  <div class="rate j-solo" v-if="false">
    <div class="u-rating" v-if="!disable">
      <i class="iconfont mr2"  v-for="(item,index) in activeObject" :class="[activeObject[index]?'icon-star pr tp1':'icon-star4 fz22  pr tp2',color]"
         @mouseenter="handleActive(index)"  @click="handleLock(index)"></i>
    </div>
    <div class="u-rating" v-else>
      <i class="iconfont mr2"  v-for="(item,index) in activeObject" :class="[activeObject[index]?'icon-star pr tp1':'icon-star4 fz22 pr tp2',color]"></i>
      <span :class="[color]">
        <slot></slot>
      </span>
    </div>
  </div>
</template>
<script setup>
const activeObject = ref([false, false, false, false, false])
var lock = false
const emits = defineEmits(["active"])
const props = defineProps({
  num: {
    type: Number,
    default: 1
  },
  disable:{
    type:Boolean,
    value:false
  },
  lock:{
    type:Boolean,
    value:false
  },
  color:{
    type:String,
    default:""
  }
})

for (var i = 0; i < props.num; i++) {
  activeObject.value[i] = true
}

watch(()=>props.num,(nval)=>{
  for (var i = 0; i < nval; i++) {
    activeObject.value[i] = true
  }
})
const handleActive = (index) => {
  lock = true
  activeObject.value = [false, false, false, false, false]
  for (let i = 0; i <= index; i++) {
    activeObject.value[i % 6] = true
  }
  emits("active", activeObject.value.filter(c => c).length)
}

const handleLock = (index) => {
  lock = true
  emits("active", activeObject.value.filter(c => c).length)
}

const handleUnActive = (index) => {
  if (!lock) {
    for (let i = 1; i <= index + 1; i++) {
      activeObject.value[i % 5] = false
    }
  }
}
</script>
<style scoped>
.u-rating i {
  color: #36ad6a;
  font-size: 18px;
}
</style>